<template>
  <div class="container ">
    <div class="row article">
      <div class="col-lg-3 col-md-3 col-sm-12 col-sx-12 article-directory ">
        <div class="directory js-toc">
        </div>
      </div>
      <div class="col-lg-9 col-md-9 col-sm-12 col-sx-12 article-details">
        <div class="author_info">
            <div>标题: <span>{{ blog.articleTitle }}</span></div>
            <div>分类: <span>{{ blog.category.categoryName }}</span></div>
            <div class="tag_label">
              标签: <span v-for="(tag,index) in blog.tags">{{ tag.tagName }}</span>
            </div>
            <div>时间:<span>{{ getTime(blog.articleDate) }}</span></div>
        </div>
        <div class="article_img"><img :src="blog.articleImageurl" ></div>
        <div id="wrapper" class="typo js-toc-content  typo-selection match-braces" v-html="blog.articleContent">
        </div>
        <div class="like"><span :class="{ like_active : isLike}" @click="clickLike" class="iconfont icondianzan"></span></div>
      </div>
    </div>
  </div>

</template>

<script>
import "../../../assets/css/tocbot/tocbot.min";
import prism from "../../../assets/css/prism/prism";
import {request} from "../../../axios";

export default {
  name: "ArticleDetails",
  data(){
    return {
      isLike: false,
      blog:{
          articleId:0,
          articleTitle:'',
          articleContent:'',
          articleDescription:'',
          articleImageurl:'',
          articleLikeCount:0,
          articleDate:'0000-00-00 00:00:00',
          articleViews:0,
          articleStatus:0,
          tags:[],
          category:'',
      }
    }
  },
  methods:{
    importJs(){
     var script =  document.createElement("script");
     var head =  document.getElementsByTagName("head")[0];
     script.src="prism/prism.js";
     head.appendChild(script);
    },
    clickLike(){
      this.isLike = !this.isLike;
      if(this.isLike){
        this.alterLikeCount(this.blog. articleId,1);
      }else {
        this.alterLikeCount(this.blog. articleId,-1);
      }
    },
    alterLikeCount(id,count){
      request({
        url:`/backend/updateblogarticlelikecount/${id}/${count}`,
        method:'GET'
      })
    },
    getTime(time){
      let date = new Date(time);
      let y = date.getFullYear();
      let M = date.getMonth()+1>=10 ? date.getMonth()+1: "0" + (date.getMonth()+1);
      let d = date.getDate() >=10 ? date.getDate(): "0" + date.getDate();
      let h = date.getHours() >=10 ? date.getHours(): "0" + date.getHours();
      let m = date.getMinutes() >=10 ? date.getMinutes(): "0" + date.getMinutes();
      let s = date.getSeconds() >=10 ? date.getSeconds(): "0" + date.getSeconds();
      return y + "-" + M + "-" + d + " " + h + ":" + m +":" + s;
    },
  },
  created() {
    console.log("articledetails"+this.$route.params.blog)
    if(this.$route.params.blog){
      this.blog= JSON.parse(this.$route.params.blog) ;
    }else {
      console.log("this.$route.params.blog")
       this.$router.push({
        path:`/articledetails/datarequest/${this.$route.params.id}`,
      })
    }
  },
  mounted() {
    // this.importJs();
    tocbot.init({
      // Where to render the table of contents.
      tocSelector: '.js-toc',
      // Where to grab the headings to build the table of contents.
      contentSelector: '.js-toc-content',
      // Which headings to grab inside of the contentSelector element.
      headingSelector: 'h1, h2, h3',
      // For headings inside relative or absolute positioned containers within content.
      hasInnerContainers: true,
    });
    prism.highlightAll()

  },
}
</script>

<style>
@import  "../../../assets/css/typo/typo.css";
@import  "../../../assets/css/tocbot/tocbot.css";
@import  "../../../assets/css/prism/prism.css";
</style>

<style scoped>

.article{
  background-color: rgba(249,249,249,.9);
  min-height: 100vh;
}

.author_info{
  display: flex;
  flex-wrap: wrap;
  color: #ff0000;
  font-size: 14px;
  box-shadow: 0 0 3px #54BC4B;
  border-bottom: 1px solid #54BC4B;
  margin-bottom: 10px;
}
.author_info >div{
  margin-right: 20px;
  padding: 0 5px;
  border-radius: 5px;
}
.author_info >div:hover{
  transform: scale(1.2);
}
.author_info >div:nth-child(2n){
  background-color: #ffff00;
}
.author_info >div:nth-child(2n+1){
  background-color: #1abc9c;
}
.tag_label >span{
  padding: 0 5px;
  margin-right: 5px;
  border-radius: 5px;
}
.tag_label >span:nth-child(2n){
  background-color: #dddddd;
}
.tag_label >span:nth-child(2n+1){
  background-color: #03e9f4;
}
.article_img{
  margin: 0 auto;
  border: 2px solid #1abc9c;
  border-radius: 5px;
}
.article_img img{
  width: 100%;
  vertical-align: middle;
}
.article-directory{
  position: relative;
}
.directory{
  position: sticky;
  top: 100px;
  left: 0px;
  width: 95%;
  background-color: #ffff00;
  box-shadow: 0 0 10px #dddddd;
  border-radius: 5px;
}
.like {
  display: flex;
  justify-content: center;
}
.like span{
  font-size: 2rem;
  color: #c0c0c0;
  cursor: pointer;
}
.like_active{
  color: red !important;
}
#wrapper{
  padding: 0 3px;
}
#wrapper p{
  text-indent: 2rem;
}

@media only screen and (max-width: 960px) {
  .directory{
    display: none;
  }
}
</style>